<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyword"/>&nbsp;
      <button @click="searchUsers">Search</button>
    </div>
  </section>
</template>

<script>

export default {
  name: "mySearch",
  data() {
    return {
      keyword: '',
    };
  },
  methods: {
    searchUsers() {
        this.$bus.$emit('updateListData',{users:[],isFirst:false,isLoading:true,errMsg:''})
        // vue-resource的$http用法和axios一模一样，都是promise风格的，在vue1.0用的比较多，现在用的不多
        this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
          res => {
            console.log('请求成功了!');

            this.$bus.$emit('updateListData',{users:res.data.items,isLoading:false,errMsg:''})
          },
          err => {
            console.log('请求失败了!'+err.message);
            this.$bus.$emit('updateListData',{users:[],isLoading:false,errMsg:err.message})
          }
        )
    },
  },
};
</script>

<style></style>
